<template>
	<h3>MutationDemo</h3>
	{{ $store.state.count }}
	<button @click="$store.commit('increment', 10)">add 10</button>
	<hr />
	{{ $store.state.salary }}
	<button @click="$store.commit('incrementSalary', { amount: 1000 })">
		add 1000
	</button>
	<button @click="$store.commit({ type: 'incrementSalary', amount: 10 })">
		add 10
	</button>
	<hr />
	<button @click="$store.commit(mutaions.DECREASE_SALARY, { amount: 1000 })">
		sub 1000
	</button>
    <hr>
    <button @click="increment(1)">increment</button>
    <button @click="incrementSalary({amount:500})">incrementSalary</button>
    <button @click="subMoney({amount:500})">subMoney</button>
</template>

<script>
	import { mapGetters,mapMutations } from "vuex";
	import { DECREASE_SALARY } from "../store/mutation-types";

	export default {
		data() {
			return {
				mutaions: {
					DECREASE_SALARY,
				},
			};
		},
		methods: {
			...mapMutations([
				"increment", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

				// `mapMutations` 也支持载荷：
				"incrementSalary", // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
			]),
			...mapMutations({
				subMoney: DECREASE_SALARY, // 将 `this.add()` 映射为 `this.$store.commit('increment')`
			}),
		},
	};
</script>

<style>
</style>